JavaScriptã€ãã¬ãŒã¿ãã«ããŒããããåŠçã§æé©åããæ¹æ³ãåŠã³ãŸããé床åäžããªãŒããŒãããåæžãããŒã¿æäœã®å¹çåãå®çŸããŸãã
JavaScriptã€ãã¬ãŒã¿ãã«ããŒã®ãããåŠçããã©ãŒãã³ã¹ïŒãããåŠçã«ããé床æé©å
JavaScriptã®ã€ãã¬ãŒã¿ãã«ããŒïŒmapãfilterãreduceãforEachãªã©ïŒã¯ãé
åãæäœããããã®äŸ¿å©ã§èªã¿ãããæ¹æ³ãæäŸããŸãããã ããå€§èŠæš¡ãªããŒã¿ã»ãããæ±ãå Žåããããã®ãã«ããŒã®ããã©ãŒãã³ã¹ãããã«ããã¯ã«ãªãå¯èœæ§ããããŸããããã軜æžããããã®å¹æçãªææ³ã®1ã€ããããåŠçã§ãããã®èšäºã§ã¯ãã€ãã¬ãŒã¿ãã«ããŒã䜿çšãããããåŠçã®æŠå¿µããã®å©ç¹ãå®è£
æŠç¥ãããã³ããã©ãŒãã³ã¹ã«é¢ããèæ
®äºé
ã«ã€ããŠèª¬æããŸãã
æšæºã€ãã¬ãŒã¿ãã«ããŒã®ããã©ãŒãã³ã¹ã«é¢ãã課é¡ã®çè§£
æšæºã€ãã¬ãŒã¿ãã«ããŒã¯ããšã¬ã¬ã³ãã§ãããå€§èŠæš¡ãªé
åã«é©çšãããšããã©ãŒãã³ã¹ã®å¶éãåããå¯èœæ§ããããŸããæ ¹æ¬çãªåé¡ã¯ãåèŠçŽ ã«å¯ŸããŠå®è¡ãããåã
ã®æäœã«èµ·å ããŸããããšãã°ãmapæäœã§ã¯ãé
åå
ã®ãã¹ãŠã®ã¢ã€ãã ã«å¯ŸããŠé¢æ°ãåŒã³åºãããŸããããã«ãããç¹ã«é¢æ°ãè€éãªèšç®ãå€éšAPIåŒã³åºããå«ãå Žåã«ã倧ããªãªãŒããŒããããçºçããå¯èœæ§ããããŸãã
次ã®ã·ããªãªãèããŠã¿ãŸãããã
const data = Array.from({ length: 100000 }, (_, i) => i);
const transformedData = data.map(item => {
// è€éãªæäœãã·ãã¥ã¬ãŒã
let result = item * 2;
for (let j = 0; j < 100; j++) {
result += Math.sqrt(result);
}
return result;
});
ãã®äŸã§ã¯ãmap颿°ã¯100,000åã®èŠçŽ ãå埩åŠçããããããã«å¯ŸããŠããèšç®è² è·ã®é«ãæäœãå®è¡ããŸãã颿°ãäœåºŠãåŒã³åºãããšã«ãã环ç©ãªãŒããŒãããã¯ãå
šäœçãªå®è¡æéã«å€§ãã圱é¿ããŸãã
ãããåŠçãšã¯äœã§ããïŒ
ãããåŠçãšã¯ãå€§èŠæš¡ãªããŒã¿ã»ãããããå°ããã管çãããããã£ã³ã¯ïŒãããïŒã«åå²ããåãã£ã³ã¯ãé çªã«åŠçããããšã§ããåèŠçŽ ãåå¥ã«æäœãã代ããã«ãã€ãã¬ãŒã¿ãã«ããŒã¯äžåºŠã«ãããã®èŠçŽ ãæäœããŸããããã«ããã颿°åŒã³åºãã«é¢é£ãããªãŒããŒããããå€§å¹ ã«åæžããå šäœçãªããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãããããã®ãµã€ãºã¯ãããã©ãŒãã³ã¹ã«çŽæ¥åœ±é¿ãããããæ éã«æ€èšããå¿ èŠãããéèŠãªãã©ã¡ãŒã¿ã§ããéåžžã«å°ããããããµã€ãºã§ã¯ã颿°åŒã³åºãã®ãªãŒããŒããããããŸãåæžãããªãå¯èœæ§ããããŸãããéåžžã«å€§ããããããµã€ãºã§ã¯ãã¡ã¢ãªã®åé¡ãçºçããããUIã®å¿çæ§ã«åœ±é¿ãäžãããããå¯èœæ§ããããŸãã
ãããåŠçã®å©ç¹
- ãªãŒããŒãããã®åæžïŒèŠçŽ ããããã§åŠçããããšã«ãããã€ãã¬ãŒã¿ãã«ããŒãžã®é¢æ°åŒã³åºãã®åæ°ãå€§å¹ ã«åæžãããé¢é£ãããªãŒããŒããããåæžãããŸãã
- ããã©ãŒãã³ã¹ã®åäžïŒç¹ã«CPUè² è·ã®é«ãæäœãæ±ãå Žåãå šäœçãªå®è¡æéãå€§å¹ ã«æ¹åã§ããŸãã
- ã¡ã¢ãªç®¡çïŒå€§èŠæš¡ãªããŒã¿ã»ãããããå°ããªãããã«åå²ãããšãã¡ã¢ãªäœ¿çšéã管çããæœåšçãªã¡ã¢ãªäžè¶³ãšã©ãŒãé²ãã®ã«åœ¹ç«ã¡ãŸãã
- 䞊è¡åŠçã®å¯èœæ§ïŒãããã¯ãïŒããšãã°ãWebã¯ãŒã«ãŒã䜿çšããŠïŒäžŠè¡ããŠåŠçããŠãããã©ãŒãã³ã¹ãããã«å éã§ããŸããããã¯ãã¡ã€ã³ã¹ã¬ããããããã¯ãããšãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœäžããWebã¢ããªã±ãŒã·ã§ã³ã§ç¹ã«éèŠã§ãã
ã€ãã¬ãŒã¿ãã«ããŒã䜿çšãããããåŠçã®å®è£
JavaScriptã€ãã¬ãŒã¿ãã«ããŒã§ãããåŠçãå®è£ ããæ¹æ³ã«é¢ããã¹ããããã€ã¹ãããã¬ã€ããæ¬¡ã«ç€ºããŸãã
1. ãããåŠç颿°ã®äœæ
ãŸããæå®ããããµã€ãºã®ãããã«é åãåå²ãããŠãŒãã£ãªãã£é¢æ°ãäœæããŸãã
function batchArray(array, batchSize) {
const batches = [];
for (let i = 0; i < array.length; i += batchSize) {
batches.push(array.slice(i, i + batchSize));
}
return batches;
}
ãã®é¢æ°ã¯ãé
åãšbatchSizeãå
¥åãšããŠåãåãããããã®é
åãè¿ããŸãã
2. ã€ãã¬ãŒã¿ãã«ããŒãšã®çµ±å
次ã«ãbatchArray颿°ãã€ãã¬ãŒã¿ãã«ããŒãšçµ±åããŸããããšãã°ã以åã®mapã®äŸã倿ŽããŠããããåŠçã䜿çšããŠã¿ãŸãããã
const data = Array.from({ length: 100000 }, (_, i) => i);
const batchSize = 1000; // ããŸããŸãªããããµã€ãºã詊ããŠãã ãã
const batchedData = batchArray(data, batchSize);
const transformedData = batchedData.flatMap(batch => {
return batch.map(item => {
// è€éãªæäœãã·ãã¥ã¬ãŒã
let result = item * 2;
for (let j = 0; j < 100; j++) {
result += Math.sqrt(result);
}
return result;
});
});
ãã®å€æŽãããäŸã§ã¯ãå
ã®é
åã¯æåã«batchArrayã䜿çšããŠãããã«åå²ãããŸããæ¬¡ã«ãflatMap颿°ãããããå埩åŠçããåãããå
ã§map颿°ã䜿çšããŠèŠçŽ ã倿ããŸããflatMapã¯ãé
åã®é
åãåäžã®é
åã«å¹³åŠåããããã«äœ¿çšãããŸãã
3. `reduce`ã䜿çšãããããåŠç
åããããåŠçæŠç¥ãreduceã€ãã¬ãŒã¿ãã«ããŒã«é©çšã§ããŸãã
const data = Array.from({ length: 100000 }, (_, i) => i);
const batchSize = 1000;
const batchedData = batchArray(data, batchSize);
const sum = batchedData.reduce((accumulator, batch) => {
return accumulator + batch.reduce((batchSum, item) => batchSum + item, 0);
}, 0);
console.log("Sum:", sum);
ããã§ã¯ãåããããreduceã䜿çšããŠåå¥ã«åèšãããæ¬¡ã«ãããã®éšåçãªåèšãæçµçãªsumã«çޝç©ãããŸãã
4. `filter`ã䜿çšãããããåŠç
ãããåŠçã¯filterã«ãé©çšã§ããŸãããèŠçŽ ã®é åºãç¶æããå¿
èŠããããŸããæ¬¡ã«äŸã瀺ããŸãã
const data = Array.from({ length: 100000 }, (_, i) => i);
const batchSize = 1000;
const batchedData = batchArray(data, batchSize);
const filteredData = batchedData.flatMap(batch => {
return batch.filter(item => item % 2 === 0); // å¶æ°ã®ãã£ã«ã¿
});
console.log("Filtered Data Length:", filteredData.length);
ããã©ãŒãã³ã¹ã«é¢ããèæ ®äºé ãšæé©å
ããããµã€ãºã®æé©å
é©åãªbatchSizeãéžæããããšã¯ãããã©ãŒãã³ã¹ã«ãšã£ãŠéåžžã«éèŠã§ããããããµã€ãºãå°ãããšããªãŒããŒãããã倧å¹
ã«åæžãããªãå¯èœæ§ããããããããµã€ãºã倧ãããšãã¡ã¢ãªã®åé¡ãçºçããå¯èœæ§ããããŸããç¹å®ã®ãŠãŒã¹ã±ãŒã¹ã«æé©ãªå€ãèŠã€ããããã«ãããŸããŸãªããããµã€ãºã詊ãããšããå§ãããŸããChrome DevTools Performanceã¿ããªã©ã®ããŒã«ã¯ãã³ãŒãã®ãããã¡ã€ãªã³ã°ãšæé©ãªããããµã€ãºã®ç¹å®ã«éåžžã«åœ¹ç«ã¡ãŸãã
ããããµã€ãºã決å®ããéã«èæ ®ãã¹ãèŠçŽ ïŒ
- ã¡ã¢ãªå¶çŽïŒç¹ã«ã¢ãã€ã«ããã€ã¹ãªã©ã®ãªãœãŒã¹ãå¶çŽãããç°å¢ã§ã¯ãããããµã€ãºã䜿çšå¯èœãªã¡ã¢ãªãè¶ ããªãããã«ããŠãã ããã
- CPUè² è·ïŒç¹ã«èšç®è² è·ã®é«ãæäœãå®è¡ããå Žåã¯ãCPU䜿çšçãç£èŠããŠãã·ã¹ãã ã«éè² è·ããããªãããã«ããŠãã ããã
- å®è¡æéïŒããŸããŸãªããããµã€ãºã®å®è¡æéãæž¬å®ãããªãŒããŒãããã®åæžãšã¡ã¢ãªäœ¿çšéã®æé©ãªãã©ã³ã¹ãæäŸãããã®ãéžæããŸãã
äžèŠãªæäœã®åé¿
ãããåŠçããžãã¯å ã§ãäžèŠãªæäœãå°å ¥ããŠããªãããšã確èªããŠãã ãããäžæãªããžã§ã¯ãã®äœæãæå°éã«æããåé·ãªèšç®ãåé¿ããŸããå¯èœãªéãå¹ççã«ãªãããã«ãã€ãã¬ãŒã¿ãã«ããŒå ã®ã³ãŒããæé©åããŸãã
䞊è¡åŠç
ããã«ããã©ãŒãã³ã¹ãåäžãããã«ã¯ãWebã¯ãŒã«ãŒã䜿çšããŠãããã䞊è¡ããŠåŠçããããšãæ€èšããŠãã ãããããã«ãããèšç®è² è·ã®é«ãã¿ã¹ã¯ãå¥ã®ã¹ã¬ããã«ãªãããŒãããã¡ã€ã³ã¹ã¬ããããããã¯ãããã®ãé²ããUIã®å¿çæ§ãåäžãããããšãã§ããŸããWebã¯ãŒã«ãŒã¯ææ°ã®ãã©ãŠã¶ããã³Node.jsç°å¢ã§å©çšã§ãã䞊ååŠçã®ããã®å ç¢ãªã¡ã«ããºã ãæäŸããŸãããã®æŠå¿µã¯ãJavaã®ã¹ã¬ãããGoã«ãŒãã³ããŸãã¯Pythonã®ãã«ãããã»ãã·ã³ã°ã¢ãžã¥ãŒã«ã䜿çšãããªã©ãä»ã®èšèªãŸãã¯ãã©ãããã©ãŒã ã«æ¡åŒµã§ããŸãã
å®éã®äŸãšãŠãŒã¹ã±ãŒã¹
ç»ååŠç
å€§èŠæš¡ãªç»åã«ãã£ã«ã¿ãé©çšããå¿ èŠãããç»ååŠçã¢ããªã±ãŒã·ã§ã³ã«ã€ããŠèããŠã¿ãŸããåãã¯ã»ã«ãåå¥ã«åŠçãã代ããã«ãç»åããã¯ã»ã«ã®ãããã«åå²ããWebã¯ãŒã«ãŒã䜿çšããŠåãããã«ãã£ã«ã¿ã䞊è¡ããŠé©çšã§ããŸããããã«ãããåŠçæéãå€§å¹ ã«ççž®ãããã¢ããªã±ãŒã·ã§ã³ã®å¿çæ§ãåäžããŸãã
ããŒã¿åæ
ããŒã¿åæã®ã·ããªãªã§ã¯ãå€§èŠæš¡ãªããŒã¿ã»ããã倿ããã³åæããå¿ èŠãããããšããããããŸãããããåŠçã䜿çšããŠãããŒã¿ãããå°ããªãã£ã³ã¯ã§åŠçããå¹ççãªã¡ã¢ãªç®¡çãšããé«éãªåŠçæéãå®çŸã§ããŸããããšãã°ããã°ãã¡ã€ã«ãŸãã¯è²¡åããŒã¿ã®åæã¯ããããåŠçææ³ã®æ©æµãåããããšãã§ããŸãã
APIçµ±å
å€éšAPIãšå¯Ÿè©±ããå ŽåããããåŠçã䜿çšããŠè€æ°ã®ãªã¯ãšã¹ãã䞊è¡ããŠéä¿¡ã§ããŸããããã«ãããAPIããããŒã¿ãååŸããŠåŠçããã®ã«ãããå šäœçãªæéãå€§å¹ ã«ççž®ã§ããŸããAWS LambdaãAzure Functionsãªã©ã®ãµãŒãã¹ã¯ããããããšã«äžŠè¡ããŠããªã¬ãŒã§ããŸããAPIã¬ãŒãå¶éãè¶ ããªãããã«æ³šæããå¿ èŠããããŸãã
ã³ãŒãäŸïŒWebã¯ãŒã«ãŒã䜿çšãã䞊è¡åŠç
Webã¯ãŒã«ãŒã§ãããåŠçãå®è£ ããæ¹æ³ã®äŸã次ã«ç€ºããŸãã
// ã¡ã€ã³ã¹ã¬ãã
const data = Array.from({ length: 100000 }, (_, i) => i);
const batchSize = 1000;
const batchedData = batchArray(data, batchSize);
const results = [];
let completedBatches = 0;
function processBatch(batch) {
return new Promise((resolve, reject) => {
const worker = new Worker('worker.js'); // ã¯ãŒã«ãŒ ã¹ã¯ãªãããžã®ãã¹
worker.postMessage(batch);
worker.onmessage = (event) => {
results.push(...event.data);
worker.terminate();
resolve();
completedBatches++;
if (completedBatches === batchedData.length) {
console.log("ãã¹ãŠã®ããããåŠçãããŸãããåèšçµæïŒ", results.length)
}
};
worker.onerror = (error) => {
reject(error);
};
});
}
async function processAllBatches() {
const promises = batchedData.map(batch => processBatch(batch));
await Promise.all(promises);
console.log('æçµçµæïŒ', results);
}
processAllBatches();
// worker.js (Webã¯ãŒã«ãŒ ã¹ã¯ãªãã)
self.onmessage = (event) => {
const batch = event.data;
const transformedBatch = batch.map(item => {
// è€éãªæäœãã·ãã¥ã¬ãŒã
let result = item * 2;
for (let j = 0; j < 100; j++) {
result += Math.sqrt(result);
}
return result;
});
self.postMessage(transformedBatch);
};
ãã®äŸã§ã¯ãã¡ã€ã³ã¹ã¬ãããããŒã¿ããããã«åå²ãããããããšã«Webã¯ãŒã«ãŒãäœæããŸããWebã¯ãŒã«ãŒã¯ãããã«å¯ŸããŠè€éãªæäœãå®è¡ããçµæãã¡ã€ã³ã¹ã¬ããã«è¿éããŸããããã«ããããããã®äžŠååŠçãå¯èœã«ãªããå šäœçãªå®è¡æéãå€§å¹ ã«ççž®ãããŸãã
ä»£æ¿ææ³ãšèæ ®äºé
ãã©ã³ã¹ãã¥ãŒãµ
ãã©ã³ã¹ãã¥ãŒãµã¯ãè€æ°ã®ã€ãã¬ãŒã¿æäœïŒmapãfilterãreduceïŒã1åã®ãã¹ã«é£éãããããšãå¯èœã«ãã颿°åããã°ã©ãã³ã°ææ³ã§ããããã«ãããåæäœéã®äžéé åã®äœæãåé¿ããããšã§ãããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãããã©ã³ã¹ãã¥ãŒãµã¯ãè€éãªããŒã¿å€æãæ±ãå Žåã«ç¹ã«åœ¹ç«ã¡ãŸãã
é å»¶è©äŸ¡
é å»¶è©äŸ¡ã¯ãæäœã®çµæãå®éã«å¿ èŠã«ãªããŸã§ãæäœã®å®è¡ãé ãããŸããããã¯ãå€§èŠæš¡ãªããŒã¿ã»ãããæ±ãå Žåã«åœ¹ç«ã¡ãŸããé å»¶è©äŸ¡ã¯ããžã§ãã¬ãŒã¿ãŸãã¯Lodashã®ãããªã©ã€ãã©ãªã䜿çšããŠå®è£ ã§ããŸãã
ã€ãã¥ãŒã¿ãã«ããŒã¿æ§é
ã€ãã¥ãŒã¿ãã«ããŒã¿æ§é ã䜿çšãããšãç°ãªãæäœéã§ããŒã¿ãå¹ççã«å ±æã§ãããããããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸããã€ãã¥ãŒã¿ãã«ããŒã¿æ§é ã¯ãå¶çºçãªå€æŽãé²ãããããã°ãç°¡çŽ åã§ããŸããImmutable.jsã®ãããªã©ã€ãã©ãªã¯ãJavaScriptçšã®ã€ãã¥ãŒã¿ãã«ããŒã¿æ§é ãæäŸããŸãã
çµè«
ãããåŠçã¯ãå€§èŠæš¡ãªããŒã¿ã»ãããæ±ãå Žåã«JavaScriptã€ãã¬ãŒã¿ãã«ããŒã®ããã©ãŒãã³ã¹ãæé©åããããã®åŒ·åãªææ³ã§ããããŒã¿ãããå°ããªãããã«åå²ããããããé çªã«ãŸãã¯äžŠè¡ããŠåŠçããããšã«ããããªãŒããŒããããå€§å¹ ã«åæžããå®è¡æéãæ¹åããã¡ã¢ãªäœ¿çšéããã广çã«ç®¡çã§ããŸããããŸããŸãªããããµã€ãºã詊ããŠã䞊ååŠçã«Webã¯ãŒã«ãŒã䜿çšããããšãæ€èšããŠãããã«å€§ããªããã©ãŒãã³ã¹åäžãå®çŸããŠãã ãããã³ãŒãããããã¡ã€ãªã³ã°ããããŸããŸãªæé©åææ³ã®åœ±é¿ã枬å®ããŠãç¹å®ã®ãŠãŒã¹ã±ãŒã¹ã«æé©ãªãœãªã¥ãŒã·ã§ã³ãèŠã€ããããšãå¿ããªãã§ãã ããããããåŠçãä»ã®æé©åææ³ãšçµã¿åãããŠå®è£ ãããšãããå¹ççã§å¿çæ§ã®é«ãJavaScriptã¢ããªã±ãŒã·ã§ã³ã«ã€ãªããå¯èœæ§ããããŸãã
ããã«ããããåŠçãåžžã«*æé©ãª*ãœãªã¥ãŒã·ã§ã³ã§ã¯ãªãããšãèŠããŠãããŠãã ãããããå°ããªããŒã¿ã»ããã®å ŽåãããããäœæãããªãŒããŒããããããã©ãŒãã³ã¹ã®åäžãäžåãå¯èœæ§ããããŸãããããåŠçãå®éã«æçã§ãããã©ããã倿ããã«ã¯ã*ããªãã®*ç¹å®ã®ã³ã³ããã¹ãã§ããã©ãŒãã³ã¹ããã¹ãããã³æž¬å®ããããšãéèŠã§ãã
æåŸã«ãã³ãŒãã®è€éããšããã©ãŒãã³ã¹ã®åäžãšã®éã®ãã¬ãŒããªããèæ ®ããŠãã ãããããã©ãŒãã³ã¹ã®æé©åã¯éèŠã§ãããã³ãŒãã®å¯èªæ§ãšä¿å®æ§ãç ç²ã«ããã¹ãã§ã¯ãããŸãããããã©ãŒãã³ã¹ãšã³ãŒãå質ã®ãã©ã³ã¹ãåããã¢ããªã±ãŒã·ã§ã³ãå¹ççã§ä¿å®ããããããã«åªããŠãã ããã